<template>
	<div class="main-box">
		<div class="table-box">
			<ProTable ref="proTableRef" title="角色列表" :columns="columns" :requestApi="roleApi.page"
				:dataCallback="dataCallback">
				<template #tableHeader>
					<el-button size="default" type="success" class="ml10" @click="onOpenAddRole('add')"
						v-auth="'system:role:add'">
						<el-icon>
							<ele-FolderAdd />
						</el-icon>
						新建角色
					</el-button>
				</template>
				<template #operation="scope">
					<el-button :disabled="scope.row.roleCode === 'SuperAdmin'" size="small" text type="primary"
						@click="onOpenEditRole('edit', scope.row)" v-auth="'system:role:update'">修改</el-button>
					<el-button :disabled="scope.row.roleName === 'SuperAdmin'" size="small" text type="primary"
						@click="onRowDel(scope.row)" v-auth="'system:role:delete'">删除</el-button>
					<el-dropdown>
						<span class="el-dropdown-link">
							<el-button text size="small">更多<i class="el-icon-arrow-down el-icon--right"></i>
							</el-button>
						</span>
						<template v-slot:dropdown>
							<el-dropdown-menu>
								<el-dropdown-item :disabled="!auth('system:role:grantRoleMenus')"
									@click="openGrantMenu(scope.row)">
									授权菜单
								</el-dropdown-item>
								<el-dropdown-item divided :disabled="!auth('system:role:grantRoleResource')"
									@click="openGrantResource(scope.row)">
									授权资源
								</el-dropdown-item>
								<el-dropdown-item divided :disabled="!auth('system:role:grantRoleUser')"
									@click="openGrantUser(scope.row)">
									授权用户
								</el-dropdown-item>
							</el-dropdown-menu>
						</template>
					</el-dropdown>
				</template>
			</ProTable>
			<RoleDialog ref="roleDialogRef" @refresh="getTableData()" :dictData="state.dictData" />
			<GrantUser ref="grantUserRef" />
			<GrantMenu ref="grantMenuRef" />
			<GrantResource ref="grantResourceRef" :dataScope="state.dictData" />
		</div>
		<RoleDialog ref="roleDialogRef" @refresh="getTableData()" :dictData="state.dictData" />
		<GrantUser ref="grantUserRef" />
		<GrantMenu ref="grantMenuRef" />
		<GrantResource ref="grantResourceRef" :dataScope="state.dictData" />
	</div>		
</template>

<script setup lang="tsx" name="systemRole">
import { defineAsyncComponent, reactive, ref, watchEffect } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import { auth } from "/@/utils/authFunction";
import { feature } from '/@/utils/axios-utils';
import { SysDictData, SysRole } from '/@/api-services/models/system';
import roleApi from '/@/api-services/apis/system/roleApi';
import dictDataApi from '/@/api-services/apis/system/dictDataApi';
import { ColumnProps } from '/@/components/ProTable/interface';
import ProTable from '/@/components/ProTable/index.vue';

// 引入组件
const RoleDialog = defineAsyncComponent(() => import('./component/editRole.vue'));
const GrantUser = defineAsyncComponent(() => import('./component/grantUser.vue'));
const GrantMenu = defineAsyncComponent(() => import('./component/grantMenu.vue'));
const GrantResource = defineAsyncComponent(() => import('./component/grantResource.vue'));
// 定义变量内容
const proTableRef = ref();
const roleDialogRef = ref();
const grantUserRef = ref();
const grantMenuRef = ref();
const grantResourceRef = ref();
const state = reactive({
	loading: false,
	roleData: [] as Array<SysRole>, // 机构列表数据
	dictData: [] as Array<SysDictData>,//字典数据	
	editOrgTitle: '',
});
const getRoleDataScope = async () => {
	var res = await dictDataApi.getDatalistByType("RoleDataScope");
	state.dictData = res.data.data ?? [];
}

const dataCallback = (queryRes: any) => {
	var data = queryRes.data;
	return {
		items: data.items,
		totalCount: data.totalCount,
		pageIndex: data.pageIndex,
		pageSize: data.pageSize
	};
};
const columns: ColumnProps<SysRole>[] = [
	{
		prop: "roleName", label: "角色名称",
		search: { el: "input", key: "roleName", props: { placeholder: "角色名称" } }
	},
	{ prop: "code", label: "角色编码" },
	{
		prop: "dataScope", label: "数据范围",
		render: scope => {
			var data = state.dictData.filter(item => item.value == scope.row.dataScope)[0]
			return (<el-tag size={data.tagSize} type={data.tagType}> {data.name}</el-tag>)
		}
	},
	{ prop: "sort", label: "排序" },
	{ prop: "operation", label: "操作", fixed: "right" }
]


// 初始化表格数据
const getTableData = async () => {
	proTableRef.value.getTableList()
};
// 打开新增角色弹窗
const onOpenAddRole = (type: string) => {
	roleDialogRef.value.openDialog(type);
};
// 打开修改角色弹窗
const onOpenEditRole = (type: string, row: Object) => {
	roleDialogRef.value.openDialog(type, row);
};
// 删除角色
const onRowDel = (row: any) => {
	ElMessageBox.confirm(`此操作将永久删除角色名称：“${row.roleName}”，是否继续?`, '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
	})
		.then(async () => {
			const [err] = await feature(roleApi.delete([{ id: row.id }]));
			if (err) {
				ElMessage.error(err.message)
			}
			else {
				getTableData();
				ElMessage.success('删除成功');
			}
		})
		.catch(() => { });
};

watchEffect(() => {
	getRoleDataScope();
});

const openGrantUser = (row: any) => {
	grantUserRef.value.openDialog(row);
}
const openGrantMenu = (row: any) => {
	grantMenuRef.value.openDialog(row);
}
const openGrantResource = (row: any) => {
	grantResourceRef.value.openDialog(row);
}
</script>

<style scoped lang="scss">
.system-role-container {
	.system-role-padding {
		padding: 15px;

		.el-table {
			flex: 1;
		}
	}
}
</style>
